@import '../../../App.scss';
#discover_module {
  width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-right: 1px solid #999;
  .left_box {
    width: 730px;
    border: 1px solid #999;
    border-bottom: none;
    padding: 20px;
    padding-bottom: 40px;
  }
}
.title_container {
  border-bottom: 2px solid #C10D0C;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 4px;
  font-size: 12px;
  color: #666;
  .title_left {
    display: flex;
    align-items: center;
    .icon {
      display: block;
      @include size(35px, 25px);
      background: url('../../../static/index.png');
      background-position: -225px -156px;
    }
    .title_name {
      font-size: 20px;
      color: #333;
      margin-right: 15px;
    }
  }
  .title_right {
    span {
      color: #C10D0C;
      font-weight: 8px;
    }
  }
}
.left_module1 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item:nth-of-type(4n+4){
    margin-right: 0;
  }
  .item {
    margin: 0px 42px 30px 0;
    width: 140px;
    .image_box {
      display: block;
      @include size(140px);
      position: relative;
      cursor: pointer;
      img {
        @include size(100%);
      }
      .img_info {
        background-color: rgba($color: #252525, $alpha: 0.6);
        position: absolute;
        bottom: 0;
        @include size(100%, 27px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ccc;
        font-size: 12px;
        padding: 0 6px;
        .hot span {
          font-size: 8px;
          margin-right: 6px;
        }
      }
    }
    .text {
      margin-top: 5px;
      font-size: 14px;
      color: #000;
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}
.left_module2 {
  margin-bottom: 40px;
  .module_box {
    background: #f5f5f5;
    border: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn_change {
      margin-bottom: 50px;
      padding: 3px;
      cursor: pointer;
      &:hover {
        .iconfont {
          color:rgb(63, 63, 63);
        }
      }
      .iconfont {
        font-size: 12px;
        font-weight: bold;
        color: rgb(149, 149, 149);
      }
    }
    .swiper_box {
      margin: 28px 0;
      width: 650px;
      .swiper_item {
        margin-left: 10px;
        width: 118px;
        font-size: 12px;
        background: url(../../../static/index.png);
        background-position: -260px 100px;
        .img_box {
          width: 100%;
          background: url(../../../static/coverall.png) #f5f5f5;
          background-position: 381px 924px;
          margin-bottom: 8px;
          position: relative;
          img {
            @include size(100px);
          }
          cursor: pointer;
          &:hover {
            span {
              display: block;
            }
          }
          span {
            display: none;
            position: absolute;
            bottom: 1px;
            right: 24px;
            font-size: 20px;
            color: rgb(110, 110, 110);
          }
        }
        .name {
          color: #000;
          @include lineHover();
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .author {
          margin-top: 3px;
          color: #666;
          @include lineHover();
        }
      }
    }
  }
}
.left_module3 {
  .module_box {
    background-color: #f5f5f5;
    display: flex;
    border: 1px solid #d3d3d3;
    .box_item {
      flex: 1;
      border-right: 1px solid #d3d3d3;
      &:nth-last-of-type(1) {
        border: none;
      }
      .line_box:nth-child(2n+2) {
        background-color: #e6e6e6;
      }
      .head_box {
        padding: 20px 0 20px 20px;
        display: flex;
        img {
          @include size(80px);
          margin-right: 10px;
        }
        .head_right {
          .name {
            font-size: 14px;
            color: #333;
            font-weight: bold;
            margin-top: 10px;
          }
          .icons {
            .iconfont {
              font-size: 24px;
              color: rgb(148, 148, 148);
              margin-right: 10px;
            }
          }
        }
      }
      .line_box {
        height: 32px;
        display: flex;
        align-items: center;
        .num {
          width: 40px;
          text-align: right;
          font-size: 16px;
          margin-right: 10px;
        }
        .name {
          flex-grow: 1;
          width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: #000;
        }
      }
    }
  }
}
#discover_module .right_box {
  width: 250px;
  .login_box {
    padding: 16px 22px;
    background: linear-gradient(180deg,rgb(248, 248, 248),rgb(219, 219, 219));
    color: #666;
    font-size: 12px;
    .logo_btn {
      @include size(100px, 32px);
      @include flexCenter();
      color: #fff;
      background: linear-gradient(180deg, rgb(250, 57, 57), rgb(161, 41, 41));
      text-shadow: 0 1px 0 #8a060b;
      border-radius: 4px;
      margin: 20px auto 0;
      cursor: pointer;
      &:hover {
        background: rgb(218, 51, 51);
      }
    }
  }
  .r_title {
    font-size: 12px;
    display: flex;
    padding-bottom: 6px;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .text {
      color: #333;
      font-weight: bold;
    }
    .more {
      color: #666;
    }
  }
  .r_singer {
    padding: 20px;
    .singer_lists {
      .item {
        margin: 20px 0;
        border: 1px solid #e9e9e9;
        background-color: #f5f5f5;
        @include size(100%, 62px);
        display: flex;
        align-items: center;
        img {
          @include size(62px);
          margin-right: 10px;
        }
        .name_box {
          .name {
            font-size: 14px;
            color: #333;
            font-weight: bold;
          }
          .senfen {
            font-size: 12px;
            color: #666;
            margin-top: 6px;
          }
        }
      }
    }
  }
  .apply_btn {
    @include size(210px, 30px);
    @include flexCenter();
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e9e9e9;
    margin: 0 auto 20px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    &:hover {
      background-color: #fbfbfb;
    }
  }
  .r_dj {
    padding: 0 20px;
    .dj_lists {
      .item {
        display: flex;
        font-size: 12px;
        margin-top: 10px;
        img {
          @include size(40px);
          margin-right:10px;
        }
        .name_box {
          .name {
            color: #000;
          }
          .senfen {
            color: #666;
          }
        }
      }
    }
  }

}